<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006-2007. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Spry Effects Notification mechanism Sample</title>
	<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
	<script src="../../includes/SpryEffects.js" type="text/javascript"></script>
	<style type="text/css">

	.demoDiv{
		background-color: #CCC; 
		height: 350px;
		width: 660px;
		border: 1px solid black;
		margin-left: 1px;
		float: left;
		overflow: hidden;
	}
	.animationContainer{
		height: 355px;
		width: 700px;
	}
	#rightElement{
	width: 0px;
	border: 1px solid red;
	background-color: #FFCC33;
	;
	}
	#grow_animation{
		width: 400px; 
		height: 200px;
	}
	#grow_animation p, #grow_animation h3{
		width: 395px;
	}

	/* third sample */
	.element{
		float:left;
		position: relative;
		width: 350px;
		height: 350px;
		text-align: center;
	}
	#display{
		opacity: 0;
		filter: alpha(opacity=0);
	}
	#animate{
		left: -352px;
		opacity: 1;
		filter: alpha(opacity=100);
	}
	</style>
</head>
<body>
<h3>Spry Effect Observers</h3>
<p>
		The Spry Effect from version 1.5 allow users to register their custom JavaScript 
		observers. These observers will be automatically called by the effects in certain 
		situation. This mechanism will let you better control and customize the page content 
		and the animation running.
</p>
<p>
		Any Effect will run the observers when the following events will occur:
</p>
<ul>
	<li>Before effect start - onPreEffect</li>
	<li>Each step of the animation - onStep</li>
	<li>After effect end - onPostEffect</li>
	<li>Effect was cancelled - onCancel</li>
</ul>
<p>
	There are 2 different ways to register an observer to any effect. The first supported
	way involves creating a specific object that will receive notifications. Methods are 
	added to this object for each notification it wishes to receive. The object is then 
	added as an observer on the desired effect.
</p>
<p>
	The second way involves defining a callback function and registering it as an observer 
	on the effect. The difference with using a callback function is that it will get called 
	for *every* notification the effect dispatches. The function must check the notification 
	type passed into it to see if it is a notification it is interested in handling.
</p>
<hr />
<!-- 

Sample 1: Register the Observer object

-->

<p>
This sample will register an observer object to a Slide effect. We have here 2 divs, 
one with 660 pixels width and the other with 0 pixels width. While the animation will
collapse to left the first element, the observer will increase on each step notification
the width of the right element. After the Slide will finish the right element will appear
in the place of the left element.
</p>

<form method="get" action="observers_sample.html">
	<input type="button" onclick="slideDemo.start();" value="Click Me" />
</form>
<br />	
<div class="animationContainer">

	<!-- This is the left div -->

	<div id="leftElement" class="demoDiv">
		<div style="width:640px;">
			<h3>Lore Ipsum Content</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel 
			sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora 
			torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros 
			consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, 
			aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis 
			bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi 
			in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, 
			mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis 
			pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, 
			faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p>

			<p>Donec volutpat rhoncus velit. Etiam est quam, vulputate id, consequat id, 
			luctus eget, neque. Sed imperdiet ipsum at eros. Cras pharetra urna a arcu. 
			Proin quam magna, imperdiet vitae, luctus sed, semper eu, odio. Proin egestas 
			est ut leo. Integer porttitor, erat in elementum placerat, augue lectus bibendum 
			metus, ac placerat turpis eros tristique felis. Integer tempus vulputate 
			mauris. Praesent quis erat. Duis ut quam. Nullam pretium tellus in est. Pellentesque 
			diam. Suspendisse vehicula turpis ut ligula. Aenean augue nisl, venenatis nec, 
			sagittis pretium, iaculis sit amet, lacus. Suspendisse nulla. Integer tempor 
			ipsum sed ante. Mauris magna.</p>

			<p>Ut elementum quam et dui. Duis hendrerit, nulla vel laoreet dignissim, arcu 
			justo luctus orci, quis porttitor ante justo interdum purus. Mauris ornare euismod 
			dolor. Curabitur sed lorem. Nam non enim. Mauris dictum mollis massa. Proin a quam 
			eget sem aliquet convallis. Proin dapibus felis vitae arcu. Pellentesque nonummy. 
			Morbi vitae dolor eget purus nonummy posuere. Curabitur hendrerit rutrum lacus. 
			Vestibulum in velit nec est semper bibendum. Etiam tellus arcu, blandit vel, 
			consectetuer id, congue et, tortor.</p>
		</div>
	</div>

	<!-- This is the right div, initially invisible -->

	<div id="rightElement" class="demoDiv">
		<div style="width:640px; padding:10px;">
			<h3 id="title"> Example</h3>
			<p>Donec volutpat rhoncus velit. Etiam est quam, vulputate id, consequat id, 
			luctus eget, neque. Sed imperdiet ipsum at eros. Cras pharetra urna a arcu. 
			Proin quam magna, imperdiet vitae, luctus sed, semper eu, odio. Proin egestas 
			est ut leo. Integer porttitor, erat in elementum placerat, augue lectus bibendum 
			metus, ac placerat turpis eros tristique felis. Integer tempus vulputate 
			mauris. Praesent quis erat. Duis ut quam. Nullam pretium tellus in est. Pellentesque 
			diam. Suspendisse vehicula turpis ut ligula. Aenean augue nisl, venenatis nec, 
			sagittis pretium, iaculis sit amet, lacus. Suspendisse nulla. Integer tempor 
			ipsum sed ante. Mauris magna.</p>
            <p>Donec volutpat rhoncus velit. Etiam est quam, vulputate id, consequat id, 
			luctus eget, neque. Sed imperdiet ipsum at eros. Cras pharetra urna a arcu. 
			Proin quam magna, imperdiet vitae, luctus sed, semper eu, odio. Proin egestas 
			est ut leo. Integer porttitor, erat in elementum placerat, augue lectus bibendum 
			metus, ac placerat turpis eros tristique felis. Integer tempus vulputate 
			mauris. Praesent quis erat. Duis ut quam. Nullam pretium tellus in est. Pellentesque 
			diam. Suspendisse vehicula turpis ut ligula. Aenean augue nisl, venenatis nec, 
			sagittis pretium, iaculis sit amet, lacus. Suspendisse nulla. Integer tempor 
			ipsum sed ante. Mauris magna.</p>
	</div>
 </div>
</div>
<br style="clear:both" />

<!-- The JavaScript Code for the first sample -->

<script type="text/javascript">

	// The Slide effect will automatically move horizontally the "leftElement".
	// The observer will increase the width of the "rightElement" with the
  // difference between the initial "leftElement" width and the current width.

	var obs = new Object;

	/**
	*	 onPreEffect() 
	*	 		This function is called before the Slide start. We are resetting the CSS 
	*			properties of the leftElement and rightElement to their default values 
	*			that will be modified later.
	*		Parameters:
	*			- effect - The effect running
	*/
	obs.onPreEffect = function(effect){
		this.rightElement = document.getElementById('rightElement');
		this.leftElement = effect.element;
		this.rightElement.style.color="";
	}

	/**
	*	 onStep() 
	*	 	  This function is called after every draw of the leftElement by the effect. 
	*			We will compute the new width of the rightElement based on the leftElement 
	* 		current width. 
	*		Parameters:
	*			- effect - The effect which calls this method
	*/
	obs.onStep = function(effect){
		var currentWidth = parseInt(this.leftElement.style.width, 10);
		if (isNaN(currentWidth)){
			currentWidth = 660;
			this.leftElement.style.width = '660px';
		}
		this.rightElement.style.width = (660 - currentWidth) + "px";
	}

	/**
	*	 onPostEffect() 
	*	 	  After the Slide animation the onPostEffect function will be called. Here we set
	*			the color of the right element text to red.
	*		Parameters:
	*			- effect - The effect which calls this method
	*/
	obs.onPostEffect = function(effect, data){
		this.rightElement.style.color="#FF0000";
	}

	/**
	*	 onCancel() 
	*	 	  When a user click the button that starts the animation before the current animation
	*			would be finish a cancel is triggered. Also programmatically users may cancel the 
	* 		effect. In this situation the onCancel() method is called where you should do cleaning
	* 		if necessary. We revert in this situation the CSS properties.
	*		Parameters:
	*			- effect - The effect which calls this method
	*/

	obs.onCancel = function(effect){
		this.onPreEffect(effect);
	}

	var slideDemo = new Spry.Effect.Slide('leftElement', {horizontal: true, duration: 3000, toggle: true});
	slideDemo.addObserver(obs);

</script>
<hr />
<!-- 

Sample 2: The notification function

-->
<p>
This second sample will use an observer function to register to a Grow effect. After the element 
animation will run, we will re-start the animation in the oposite direction and we will change the content.
</p>
<form method="get" action="observers_sample.html">
	<input type="button" onclick="second_effect.start();" value="Start !" />
</form>
<br />	
<div class="animationContainer" style="height: 200px;">
	<div id="grow_animation" class="demoDiv">
			<h3>Grow Animation</h3>
			<p style="color:blue">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel 
			sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora 
			torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros 
			consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, 
			aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis 
			bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi 
			in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, 
			mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis 
			pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, 
			faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p>
	</div>
	<br style="clear:both" />
</div>
<script type="text/javascript">
<!--
	var content = ["<h3>Grow Animation</h3><p style='color:blue'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros	consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel,	aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis	bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi	in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia,	mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis,	faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p>", "<h3>Second Time Grow Run</h3> <p style='color:red'>Donec volutpat rhoncus velit. Etiam est quam, vulputate id, consequat id, luctus eget, neque. Sed imperdiet ipsum at eros. Cras pharetra urna a arcu. Proin quam magna, imperdiet vitae, luctus sed, semper eu, odio. Proin egestas est ut leo. Integer porttitor, erat in elementum placerat, augue lectus bibendum	metus, ac placerat turpis eros tristique felis. Integer tempus vulputate	mauris. Praesent quis erat. Duis ut quam. Nullam pretium tellus in est. Pellentesque diam. Suspendisse vehicula turpis ut ligula. Aenean augue nisl, venenatis nec, sagittis pretium, iaculis sit amet, lacus. Suspendisse nulla. Integer tempor	ipsum sed ante. Mauris magna.</p>"];
	
	var i = 0;
	var observer = function (method, effect, data)
	{
		if (method == 'onPreEffect')
		{
			// we change before the element to run in reverse mode the content
			if (effect.direction == Spry.backwards)
				effect.element.innerHTML = content[++i % 2];
		}

		if (method == 'onPostEffect')
		{
			// we will restart the effect to run in opposite direction after the first run
			// the setTimeout is used to wait for the current animation to stop
			if (effect.direction == Spry.forwards)
				setTimeout(function(){effect.start()}, 10);
		}
		// nothing to be done here
		if (method == 'onStep'){}
		if (method == 'onCancel'){}
	}

	var second_effect = new Spry.Effect.Grow('grow_animation', {from: '100%', to: '0%', toggle: true, duration: 2000});
	second_effect.addObserver(observer);
-->
</script>
<hr />
<!--

		Example 3: Fading in an image while fading out a different image 

		-->
<p>Using the observers we can fade in an image while fading out another one in 
parallel to obtain the replacement image effect. The observer will compute the 
complementary opacity value of the non animated container. The effect works 
in reverse direction too.</p>
<form method="get" action="observers_sample.html">
	<input type="button" onclick="third_effect.start();" value="Start" />
</form>
<br />
<div id="container">
	
	<!-- hidden image container -->
	<div id="display" class="element">
		<img id="displayimg" src="../../demos/gallery/galleries/china/images/china_09.jpg"  alt="Sample Image"/>
	</div>

	<!-- display image container -->
	<div id="animate" class="element">
		<img id="animateimg" src="../../demos/gallery/galleries/china/images/china_10.jpg" alt="Sample Image." />
	</div>

</div>
<br style="clear:both" />
<script type="text/javascript">
	// The Fade effect will fade out the displayed image container
	var third_effect = new Spry.Effect.Fade('animate', {duration: 3000, from: 100, to: 0, toggle: true});

	// We prepare an observer that will change the opacity of the initially 
	// hidden element in oposition with the initially visible element
	var obs = new Object;

	// On each effect step we calculate the complementary opacity for the other image container.
	obs.onStep = function(ef){
		if (typeof otherEl == 'undefined')
			otherEl = document.getElementById('display');
		var opacity = 0;
		if(/MSIE/.test(navigator.userAgent)){
			opacity = Spry.Effect.getStyleProp(ef.element, 'filter').replace(/alpha\(opacity([0-9]{1,3})\)/, '$1');
			otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1 - opacity), 10) + ")";
		}else{
			opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
			otherEl.style.opacity = (1 - opacity);
		}
	};

	// Attach the observer to the Fade effect
	third_effect.addObserver(obs);
</script>
<hr />
</body>
</html>
